import { Component, Vue } from 'vue-property-decorator'
import style from './News.less'
import { Action } from 'vuex-class'
@Component
export default class News extends Vue {
  private pageIndex: number = 1
  private pageSize: number = 10
  private total: number = 0
  private list: any[] = []
  private loading: boolean = false

  @Action('homepage/queryNewsList') private queryNewsList!: any

  private render() {
    return (
      <div class={style.container}>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to={{ path: '/homepage/first' }}>
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>公告通知</el-breadcrumb-item>
        </el-breadcrumb>
        <div class={style.content}>
          <p class={style.title}>公告通知</p>
          <el-table
            data={this.list}
            style="width: 100%"
            v-loading={this.loading}
            ref="table"
            onRow-click={this.rowClick}
          >
            <el-table-column
              prop="title"
              label="标题"
              width="880px"
              // show-overflow-tooltip
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return (
                      <p
                        class={{
                          'over-hidden': true,
                          [style.newsTitle]: true,
                        }}
                        title={scope.row.title}
                      >
                        {scope.row.isTop && <p class={style.isTop}>推荐</p>}
                        {scope.row.title}
                      </p>
                    )
                  },
                },
              }}
            />
            <el-table-column
              align="right"
              prop="time"
              width="200"
              label="时间"
              {...{
                scopedSlots: {
                  default: (scope: any) => {
                    return (
                      <p class={style.time}>
                        {(scope.row.publishTime || '').split(' ')[0]}
                      </p>
                    )
                  },
                },
              }}
            />
          </el-table>
          {this.list && this.list.length > 0 && (
            <el-pagination
              class={{ [style.pagination]: true }}
              onSize-change={this.handleSizeChange}
              onCurrent-change={this.handleCurrentChange}
              current-page={this.pageIndex}
              page-sizes={[10, 20, 30]}
              page-size={this.pageSize}
              layout="total, sizes, prev, pager, next, jumper"
              total={this.total}
              pager-count={5}
            />
          )}
        </div>
      </div>
    )
  }

  handleSizeChange(val: number) {
    this.pageIndex = 1
    this.pageSize = val
    this.queryList()
  }

  handleCurrentChange(val: number) {
    this.pageIndex = val
    this.queryList()
  }

  queryList() {
    this.loading = true
    this.queryNewsList({ pageIndex: this.pageIndex, pageNumber: this.pageSize })
      .then((res: any) => {
        this.loading = false
        this.list = res.list
        this.total = res.total
      })
      .catch(() => {
        this.loading = false
      })
  }
  async query() {
    this.pageIndex = 1
    this.queryList()
  }
  private mounted() {
    this.query()
  }

  rowClick(row: any, column: any, event: any) {
    // alert(row.id)
    this.$router.push({ name: 'newsDetail', query: { id: row.id } })
  }
}
